<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>菜单管理</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增菜单
          </el-button>
        </div>
      </template>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="menuList"
        row-key="menuId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="菜单名称" align="left" prop="menuName" />
        <el-table-column label="图标" align="center" prop="icon" width="100">
          <template #default="scope">
            <el-icon v-if="scope.row.icon">
              <component :is="scope.row.icon" />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="orderNum" width="60" />
        <el-table-column label="权限标识" align="left" prop="perms" />
        <el-table-column label="路由地址" align="left" prop="path" />
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '0' ? 'success' : 'info'">
              {{ scope.row.status === '0' ? '正常' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button type="text" @click="handleUpdate(scope.row)">
              <el-icon><Edit /></el-icon>
              修改
            </el-button>
            <el-button type="text" @click="handleAdd(scope.row)">
              <el-icon><Plus /></el-icon>
              新增
            </el-button>
            <el-button type="text" @click="handleDelete(scope.row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const menuList = ref<any[]>([])

const getList = () => {
  loading.value = true
  setTimeout(() => {
    menuList.value = [
      {
        menuId: 1,
        menuName: '系统管理',
        parentId: 0,
        orderNum: 1,
        path: '/system',
        component: null,
        menuType: 'M',
        visible: '0',
        status: '0',
        perms: '',
        icon: 'Setting',
        children: [
          {
            menuId: 2,
            menuName: '用户管理',
            parentId: 1,
            orderNum: 1,
            path: 'user',
            component: 'system/user/index',
            menuType: 'C',
            visible: '0',
            status: '0',
            perms: 'system:user:list',
            icon: 'User'
          }
        ]
      }
    ]
    loading.value = false
  }, 1000)
}

const handleAdd = (row?: any) => {
  ElMessage.info('新增菜单功能')
}

const handleUpdate = (row?: any) => {
  ElMessage.info('修改菜单功能')
}

const handleDelete = (row?: any) => {
  ElMessageBox.confirm('确认删除该菜单?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
